<template>
  <div class="foot">
    <div
      v-for="(v, i) in arr"
      :key="i"
      @click="fun(v, i)"
      :class="{ red: num == i }"
    >
      <img :src="v.img" alt="" />
      <span>{{ v.val }}</span>
    </div>
  </div>
</template>

<script>
// import Vue from "vue";
// import { Icon } from "vant";

// Vue.use(Icon);
export default {
  data() {
    return {
      num: 2,
      arr: [
        {
          img: "../../../../public/qiaoxiaodong/dibu1.png",
          val: "试用中心",
          code: 0,
        },
        {
          img: "../../../../public/qiaoxiaodong/dibu2.png",
          val: "试用报告",
          code: 1,
        },
        {
          img: "../../../../public/qiaoxiaodong/dibu3.png",
          val: "我的",
          code: 2,
        },
      ],
    };
  },
  methods: {
    fun(v, i) {
      this.num = i;
      if (this.num == 0) {
        this.$router.push("/eja");
      }
      if (this.num == 1) {
        this.$router.push("/sybg");
      }

    },
  },
};
</script>

<style scoped>
.foot {
  width: 100%;
  height: 1.3rem;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  position: fixed;
  bottom: 0;
  background: #fff;
  border-bottom: 1px solid #eeeeee;
}
.red {
  color: red;
}
.left {
  /* flex: 1; */
  margin-left: -0.2rem;
}
img {
  text-align: center;
}
.right {
  /* flex: 1; */
  margin-left: 0.2rem;
}
span {
  font-size: 0.28rem;
}
</style>